<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="res/static/css/main.css">
<link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
<script type="text/javascript" src="res/layui/layui.js"></script>
<script type="text/javascript" src="res/layui/jquery-1.10.2.min.js"></script>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<link href="css/bootstrap.min.css" rel="stylesheet" >
<script type="text/javascript" src ="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src ="js/bootstrap.min.js"></script>
<style>
.layui-form-label, .layui-input-block {
	margin-left: 0;
	float: left;
}

.layui-input {
	float: left;
	width: 47%;
	margin-left: 3%;
}

.layui-btn-add {
	margin-left: 10px;
}
</style>
<script>
	layui
			.use(
					'layer',
					function() { //独立版的layer无需执行这一句
						var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

						$('.l .layui-btn')
								.on(
										'click',
										function() {
											//触发事件
											var active = {
												offset : function(othis) {
													var type = othis
															.data('type'), text = othis
															.text();

													layer
															.open({
																time : 2000,
																type : 1,
																offset : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
																,
																id : 'l' + type //防止重复弹出
																,
																content : '<div style="background-color:rgba(0,0,0,0.1);"><div style="padding: 20px 50px;">'
																		+ '添加成功'
																		+ '</div></div>',
																/* btn : '继续添加', */
																btnAlign : 'c' //按钮居中
																,
																shade : 0 //不显示遮罩
																,
																yes : function() {
																	layer
																			.closeAll();
																}
															});
												}
											};
											var othis = $(this), method = othis
													.data('method');
											active[method] ? active[method]
													.call(this, othis) : '';
										});

					});
</script>
<!-- <script>
	layui.use('layer', function() { //独立版的layer无需执行这一句
		var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

		//触发事件
		var active = {
			offset : function(othis) {
				var type = othis.data('type'), text = othis.text();

				layer.open({
					type : 1,
					offset : type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
					,
					id : 'choose-btns' + type //防止重复弹出
					,
					content : '<div style="padding: 20px 100px;">' + '添加成功'
							+ '</div>',
					btn : '继续添加',
					btnAlign : 'c' //按钮居中
					,
					shade : 0 //不显示遮罩
					,
					yes : function() {
						layer.closeAll();
					}
				});
			}
		};

		$('#choose-btns .layui-btn').on('click', function() {
			var othis = $(this), method = othis.data('method');
			active[method] ? active[method].call(this, othis) : '';
		});

	}); 
</script>-->
<script>
	var layer = document.createElement("div");
	layer.id = "layer";
	function func() {
		var style = {
			background : "#f00",
			position : "absolute",
			zIndex : 10,
			width : "200px",
			height : "200px",
			left : "200px",
			top : "200px"
		}
		for ( var i in style)
			layer.style[i] = style[i];
		if (document.getElementById("layer") == null) {
			document.body.appendChild(layer);
			setTimeout("document.body.removeChild(layer)", 2000)
		}
	}
</script>
<script type="text/javascript"></script>
</head>
<body>
 <a href="gopersoninfo">个人333333333333333333333333333333中心<a> <br>
	<span class="tooltip" title="My first tooltip">Hover me!</span>
	<div class="l">
		<button data-method="offset" data-type="auto"
			class="layui-btn  layui-btn-danger car-btn">加入购物车</button>
	</div>
	<div id="l">
		<button data-method="offset" data-type="auto"
			class="layui-btn layui-btn-normal">加入购物车</button>
	</div>
	<button id="btn" onclick="func()">btn</button>

	<div id="a" name="test">1</div>
	<div id="b" name="test">2</div>
	<div id="c" name="test">3</div>
	<div id="d" name="test">4</div>
	<div id="e" name="test">5</div>
	<div id="f" name="test">6</div>
	<button class="btn1">Hide Options</button>


	<script>
		$(function() {
			$("div[name='test']").click(function() {
				if ($(this).attr("class") == "blue") {
					$(this).attr("class", "white");
				} else {
					$(this).attr("class", "blue");
				}
			});
			//alert($("div").css("display"));
			$(".btn1").click(function() {
				if ($("div").css("display") == "none") {
					$("div").css("display", "block");
				} else {
					$("div").hide();
				}
			});
		});
	</script>
	<div class="info" style="width: 200px; height: 100px">阿萨德法师打发斯蒂芬
	</div>
	<script type="text/javascript">
		$(function() {
			$(".info").click(function() {
				alert("ddd");
				$(this).css("background", "red");
			});
		})
	</script>
	<hr>
	<button class="layui-btn" id="layui-btn" onclick="AddInput()">新增</button>
	<div id="body">
		<div class="layui-form-item">
			<label class="layui-form-label">单行输入框</label>
			<div class="layui-input-block">
				<input type="text" name="title" lay-verify="title"
					autocomplete="off" class="layui-input"> <input type="text"
					name="title" lay-verify="title" autocomplete="off"
					class="layui-input">
			</div>
		</div>
	</div>


	<div class="layui-input-inline">
		<button type="button" onclick="selectRole()"
			class="layui-btn layui-btn-primary layui-btn-radius">选择角色</button>
	</div>
<!-- <script type="text/javascript">
//选择角色弹层
function selectRole(){
    layer.open({
        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        type:1,
        title:"查找用户角色",
        area: ['50%','50%'],
        content:'<div style="background-color:rgba(0,0,0,0.1);"><div style="padding: 20px 50px;">'
			+ '添加成功'
    });
}
</script> -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
...more buttons...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
      </div>
      <div class="modal-body">
        <form  id="xiaoming" action="getInsertAddressInfo">
          <div class="form-group">
            <label for="recipient-name" class="control-label">用户名</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-address" class="control-label">地址</label>
            <textarea class="form-control" id="message-address"></textarea>
          </div>
        </form>
        <div class="form-group">
            <label for="message-tel" class="control-label">联系方式</label>
            <textarea class="form-control" id="message-tel"></textarea>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">我在想想</button>
        <button type="button" class="btn btn-info">立即添加</button>
      </div>
    </div>
  </div>
</div>
<div class="tree-node" node-id="402881e540a6c1ba0140a6c1ffc400d9" style="cursor: pointer;">
<span class="tree-indent"></span>
<span class="tree-icon icon icon-org" style="height: 18px; vertical-align: middle;"></span>
<span class="tree-title">机构管理</span>
</div>

<script type="text/javascript">
	$(function(){
		$("#xiaoming").click(function(){
			
		})
		
	})
</script>
<script type="text/javascript">
$('div').click(function(){
    //  ">span:nth-child(3)"    表示div的子span元素集合中的第3个元素
    //  "$(">span:nth-child(3)",this)"   表示在当前div查找
   alert(   $(">span:nth-child(3)",this).html()   );    
    
   //另外eq()方法也同样可以,注意索引从0开始
   alert(   $(">span",this).eq(2).html()   );
    
   //jquery中的children
   alert(  $(this).children("span").last().text()  );
 
   //匹配最后一个子元素
   alert(  $(">span:last-child",this).html()   );
   alert(  $(this).children("span:last").html()  );
    
})
</script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  点击就送
</button>
 
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
                <form id="updateform" action="success.jsp" >
                    <div class="form-group">
                        <label for="loginname" class="control-label">用户名:</label>
                        <input type="text" class="form-control" id="loginname" name="loginname">
                    </div>
                    <div class="form-group">
                        <label for="email" class="control-label">Email:</label>
                        <input type="text" class="form-control" id="email" name="email">
                    </div>
                    <div class="form-group">
                        <label for="phone" class="control-label">电话:</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="address" class="control-label">收货地址:</label>
                        <textarea class="form-control" id="address" name="address"></textarea>
                    </div>
                    <div class="text-right">
                        <span id="returnMessage" class="glyphicon"> </span>
                        <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                        <button id="submitBtn" type="button" class="btn btn-primary" onclick="add_info()" >修改</button>
                    </div>
                </form>
      </div>
    </div>
  </div>
</div>
 
</body>
 
<script>
    function add_info()
    {
        var form = document.getElementById('updateform');
        form.submit();
        $("#myModal").on("hidden.bs.modal", function() {
            $(this).removeData("bs.modal");
        });
 
    }
</script>
</body>
</html>